<template>
	<view>
		<view class="head">
			<TbarNav title="订单详情" isbg="0" :stickys="true"></TbarNav>
	<!-- 		<view class="top-bg" :style="'background-image: url('+ baseUrl +'/static/wximages/000123.png);'">
			</view> -->
			<view class="top-con">
				<view class="title">
					<itemInfoCompVue style="height: 100%;" :item-info="info"></itemInfoCompVue>
					<!-- <text>{{info.title}}</text> -->
					<!-- <view class="sp"><view class="span">{{info.ctitle}}</view></view> -->
				</view>
				<view class="date">
					<view class="data-warp">
						<view class="date-title">请选择预定日期</view>
								<view class="date-list">
									<scroll-view class="date-list-con-scroll" 
										scroll-x="true"
										:scroll-left="scrollLeft"
										@scroll="onScroll"
										scroll-with-animation
										>
										<view class="date-list-con">
										<view class="li"
											@click="onDateClick(index)"
											:class="index == dateIndex ? 'on': ''" 
											v-for="(item, index) in dateList"
											:key="index"
											>
											<text>{{ item.dayOfWeek }}</text>
											<text>{{ item.date }}</text>
											<text style="color: #FE5601;">￥{{ roundedNumber(info.price - discountPirce) }}</text>
										</view>
										</view>
									</scroll-view>
									<view class="date-list-icon" @click="goRight">
										<view class="txt">更</view>
										<view class="txt">多</view>
										<image style="transform: rotate(90deg);" :src="baseUrl +'/static/wximages/icon-14.png'" mode="widthFix"></image>
									</view>
								</view>
						<!-- 		<view class="tips">
									每个时间段，最多可以预约4个人
								</view> -->
								<view class="date-title">请选择时间段</view>
								<view class="date-period">
									<view class="li"
										  @click="onTimeSlotsClick(index)"
										  :class="index == timeSlotsIndex ? 'on' : '' "
										  v-for="(item, index) in timeSlots"
										  :key="index"
										  >
										<view class="lr" :class="item.is_full ? 'hot' : 'lan' ">{{item.is_full ?'满':'空'}}</view>
										<view class="man">{{item.start_time}}--{{item.end_time}}</view>
									</view>
								</view>
					</view>
				</view>
			</view>
			
			
			
			
			<view class="form">
				<view class="title">游客信息</view>
				
				<view class="list">
					<view class="li">
						<text class="require-prop">姓名</text>
						<input v-model="formData.name" type="text" placeholder="请输入" />
					</view>
					<view class="li">
						<text>身份证号码</text>
						<input v-model="formData.idnumber" type="text" placeholder="请输入" />
					</view>
					<view class="li">
						<text class="require-prop">手机号</text>
						<input v-model="formData.phone" type="text" placeholder="请输入" />
					</view>
					<view class="li">
						<text class="require-prop">人数</text>
						<input type="text" v-model="formData.limited" placeholder="请输入">
					</view>
				</view>
			</view>
			
			<!-- <view class="form">
				<view class="tips">
					<text>限载人数</text>
					<text>{{info.limited}} 人</text>
				</view>
			</view> -->
		</view>
		<view style="height: 120rpx;"></view>
		<view class="btns">
			<view class="left">
				<view class="price">
					<text>租赁价格：</text>
					<text>￥{{roundedNumber(info.price - discountPirce)}}</text>
				</view>
				<!-- <view class="yh" v-if="discountPirce > 0">会员折扣¥{{discountPirce}}</view> -->
			</view>
			
			<button @click="onSubmit">立即支付</button>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="title">
					<image @click="onClosure" class="gb" :src="baseUrl+ '/static/wximages/icon-gb.png'" mode="widthFix"></image>
					<text>安全收银台</text>
				</view>
				<view class="wallet">
					<view class="djs">
						<text class="djs-rest-time">剩余支付时间</text>
						<view class="djs-con">
							<countDown tipText=" "	dayText=" "	hourText=" " minuteText=":"	secondText=" " :datatime="datatime"	:isDay="false" :isHour="false"></countDown>
						</view>
					</view>
					<view class="price">
						<text>¥</text>
						<text>{{ roundedNumber(info.price - discountPirce) }}</text>
					</view>
					
					<view class="jifen">
						支付完成将获得 {{ info.price - discountPirce}} 个积分
					</view>
				</view>
				<view class="payment">
					<view class="pay-mode">支付方式</view>
					<!-- <view class="li" @click="onPayTypeClick('memberCard')">
						<view class="left">
							<image :src="baseUrl+ '/static/wximages/syt-01.png'" mode="widthFix"></image>
							<text>会员支付 ¥{{userInfo.card_price}}</text>
						</view>
						<view class="icon">
							<image v-if="payType == 'memberCard'" :src="baseUrl+ '/static/wximages/syt-04.png'" mode="widthFix"></image>
						</view>
					</view> -->
					<view class="li" @click="onPayTypeClick('yue')">
						<view class="left">
							<image :src="baseUrl+ '/static/wximages/syt-02.png'" mode="widthFix"></image>
							<text>积分支付 ¥{{userInfo.now_money}}</text>
						</view>
						<view class="icon">
							<image v-if="payType == 'yue'" :src="baseUrl+ '/static/wximages/syt-04.png'" mode="widthFix"></image>
						</view>
					</view>
					<view class="li" @click="onPayTypeClick('weixin')">
						<view class="left">
							<image :src="baseUrl+ '/static/wximages/syt-03.png'" mode="widthFix"></image>
							<text>微信支付</text>
						</view>
						<view class="icon">
							<image v-if="payType == 'weixin'" :src="baseUrl+ '/static/wximages/syt-04.png'" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="pay-btn" @click="onPay">
					<button>
						<text v-if="payType == 'memberCard'">支付</text>
						<text v-if="payType == 'yue'">支付</text>
						<text v-if="payType == 'weixin'">支付</text>
					</button>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="paySuccessRef" type="bottom">
			<view class="pay-pop-warp">
				<view class="success-icon">
					<image style="width: 100%;height: 100%;" src="@/static/images/pay-success.png" mode="aspectFill"></image>
				</view>
				<view class="success-txt">支付成功</view>
				<view class="jifen-box">
					<view class="left">
						<view class="star-icon">
							<image style="width: 100%;height: 100%;" src="@/static/images/star.png" mode="aspectFill"></image>
						</view>
						<view class="star-txt">获得100积分</view>
					</view>
					<view class="right">
						<text>3228积分 ></text>
					</view>
				</view>
				<view class="confirm-btn">
					<button @click="confirmClose">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TbarNav from '@/components/TbarNav'
	import { getProjectInfo, 
			getProjectDateInfo,
			getProjectTimeSlots,
			projectOrder } from '@/api/reserve.js';
	import {getUserInfo	} from '@/api/user.js';
	import countDown from '@/components/countDown';
	import itemInfoCompVue from '../../index/comp/itemInfoComp.vue';
	export default {
		components: {
			TbarNav,
			countDown,
			itemInfoCompVue
		},
		data() {
			return {
				baseUrl: this.$baseUrl,
				id: '',
				info: {},
				userInfo: {},
				dateList : [],
				timeSlots: [],
				
				dateIndex: 0,
				timeSlotsIndex: 0,
				scrollLeft: 0,
				
				formData: {
					name: '',
					phone: '',
					idnumber: ''
				},
				payType: 'yue',
				timeData: {},
				datatime: 0,
				
				discountPirce: 0
			}
		},
		computed: {
		    
		},
		onLoad(ops) {
			if (ops.id) {
				this.id = ops.id;
			}
		},
		onShow() {
			
			// 获取当前时间
			let currentDate = new Date();
			
			// 添加15分钟
			currentDate.setMinutes(currentDate.getMinutes() + 15);
			
			// 获取时间戳（以毫秒为单位）
			let timestamp = currentDate.getTime() / 1000;

			this.datatime = timestamp;
			
			
			this.getProjectDateInfo()
			this.getUserInfo();
			
		},
		methods: {
			roundedNumber(num) {
			  return Math.floor(num * 100) / 100; // 保留两位小数不四舍五入
			},
			onUvDownChange(e) {
				
				this.timeData = e
			},
			onPayTypeClick(type) {
				this.payType = type;
			},
			goRight() {
				// console.log('this.scrollLeft', this.scrollLeft);
				let randomNum = Math.random();

				this.scrollLeft = 120+randomNum;
			},
			onScroll(event) {
				console.log(event.detail);
				// this.scrollLeft = event.detail.scrollLeft;
			},
			onDateClick(index) {
				this.dateIndex = index;
				
				this.getProjectTimeSlots();
			},
			onTimeSlotsClick(index) {
				if (this.timeSlots[index].is_full) {
					return this.$util.Tips({
						title: '当前时间段已满人'
					});
					return false;
				}
				this.timeSlotsIndex = index;
			},
			getProjectDateInfo() {
				getProjectDateInfo().then(res => {
					this.dateList = res.data;
					
					
					this.getProjectTimeSlots();
				})
			},
			getProjectTimeSlots() {
				getProjectTimeSlots({
					date: this.dateList[this.dateIndex].date_nyr,
					id: this.id
				}).then(res => {
					this.timeSlots = res.data;
				})
			},
			getUserInfo() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					this.getProjectInfo();
					that.$store.commit("SETUID", res.data.uid);
				});
			},
			getProjectInfo() {
				getProjectInfo({id: this.id}).then(res => {
					this.info = res.data;
					
					if (this.userInfo.user_vip_info) {
						this.discountPirce = this.info.price - (this.info.price * (this.userInfo.user_vip_info.discount / 100));
						this.discountPirce = this.roundedNumber(this.discountPirce)
					}
				})
			},
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			onClosure() {
				this.$refs.popup.close()
			},
			onPay() {
				var that = this;
				
				if (!this.formData.name) {
					return this.$util.Tips({
						title: '请输入姓名'
					});
				}
				if (!this.formData.phone) {
					return this.$util.Tips({
						title: '请输入电话号码'
					});
				}
				if (!this.formData.idnumber) {
					return this.$util.Tips({
						title: '请输入身份证号码'
					});
				}
				
				var date = this.dateList[this.dateIndex].date_nyr
				var timeslots = this.timeSlots[this.timeSlotsIndex].start_time+'-'+this.timeSlots[this.timeSlotsIndex].end_time
				
				this.formData['date'] = date;
				this.formData['timeslots'] = timeslots;
				this.formData['pay_type'] = this.payType;
				this.formData['cid'] = this.id
				uni.showLoading({  title: '支付中'	});
				projectOrder(this.formData).then(res => {
					this.getProjectTimeSlots();
					this.getUserInfo()
					// this.$refs.popup.close()
					// return this.$util.Tips({
					// 	title: res.msg,
					// 	icon: 'success'
					// }, {
					// 	tab: 2,
					// 	url: '/pages/reserve/project/record'
					// });
					
					
					//新的ui
					that.$refs['paySuccessRef'].open('')
					uni.hideLoading();
					return
					
					var payMsg = '';
					
					if (this.payType == 'yue') {
						payMsg = '余额支付成功'
					} else if (this.payType == 'weixin') {
						payMsg = '微信支付成功'
					} else if (this.payType == 'memberCard') {
						payMsg = '会员支付成功'
					}
					
					
					if (this.payType == 'weixin') {
						uni.requestPayment({
							timeStamp: res.data.timestamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res1) {
								uni.navigateTo({
									url: '/pages/goods/order_pay_status/index?order_id='+res.data.order_no+'&msg='+payMsg+'&type=3&totalPrice='+res.data.price + '&pageType=project'
								})
							},
							fail: function(e) {
								uni.hideLoading();
								
								return that.$util.Tips({
									title: that.$t(`取消支付`)
								});
							},
							complete: function(e) {
								uni.hideLoading();
								//关闭当前页面跳转至订单状态
								// if (res.errMsg == 'requestPayment:cancel' || e.errMsg ==
								// 	'requestOrderPayment:cancel') return that.$util
								// 	.Tips({
								// 		title: that.$t(`取消支付`)
								// 	}, {
								// 		tab: 5,
								// 		url: goPages + '&status=2'
								// 	});
							},
						})
					} else {
						uni.navigateTo({
							url: '/pages/goods/order_pay_status/index?order_id='+res.data.order_no+'&msg='+payMsg+'&type=3&totalPrice='+res.data.price + '&pageType=project'
						})
					}
					
					
					
				}).catch(err => {
					uni.hideLoading();
					return this.$util.Tips({
						title: err
					});
				})
				
				
				
			},
			onSubmit() {
				this.$refs.popup.open('bottom')
			},
			confirmClose(){
				this.$refs['paySuccessRef'].close()
				uni.redirectTo({
					url:'/pages/reserve/project/record'
				})
			}
		}
	}
</script>
<style>
	page {
		/* background: #003153; */
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.djs-time {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}
	.time__item {
		display: flex;
		align-items: center;
		.red {
			width: 40rpx;
			height: 40rpx;
			background: #F4F3F8;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D;
			text-align: center;
			line-height: 40rpx;
		}
		text {
			padding: 0 5rpx;
		}
	}
	.head {
		position: relative;
		width: 750rpx;
		// height: 630rpx;
		margin-bottom: 120rpx;
		background-repeat: no-repeat;
		background-size: cover;
		.top-bg {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			border-radius: 10px 10px 0 0;
			background-repeat: no-repeat;
			background-size: cover;
			opacity: .4;
		}
		.top-con {
			position: relative;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			z-index: 1;
			.title {
				height: 220rpx;
				font-weight: 500;
				font-size: 45rpx;
				color: #FFFFFF;
				padding: 22rpx;
				display: flex;
				align-items: center;
				.sp {
					flex: 0 0 auto;
					margin-left: 22rpx;
					display: flex;
					align-items: center;
					.span {
						width: auto;
						height: 67rpx;
						padding: 0 15rpx;
						border-radius: 18rpx 18rpx 18rpx 18rpx;
						border: 2rpx solid #FFFFFF;
						font-weight: 400;
						font-size: 35rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 65rpx;
						margin-right: 10rpx;
					}
				}
			}
			
			.date {
				width: 100%;
				// width: 706rpx;
				// height: 511rpx;
				// background: #FFFFFF;
				// background: #F3F5F8;
				border-radius: 14rpx;
				margin: 0 auto;
				padding: 22rpx;
				.data-warp{
					width: 100%;
					height: 100%;
					background: #F3F5F8;
					padding:32rpx 22rpx;
					border-radius: 14rpx;
					.date-title {
						font-weight: 500;
						font-size: 30rpx;/*  */
						color: #3D3D3D;
					}
					.tips {
						font-size: 35rpx;
						color: #3D3D3D;
						text-align: center;
						padding: 25rpx 0;
					}
					.date-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 38rpx 0;
						.date-list-con-scroll {
							white-space: nowrap;
							width: 100%;
							width: 600rpx;
						}
						.date-list-con {
							display: flex;
							align-items: center;
							.li {
								flex: 0 0 auto;
								width: 114rpx;
								height: 140rpx;
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								margin-right: 26rpx;
								font-weight: 300;
								font-size: 24rpx;
								color: #000000;
								display: flex;
								align-items: center;
								justify-content: center;
								flex-direction: column;
								background: #fff;
								text{
									margin-bottom: 4rpx;
								}
								&.on {
									width: 114rpx;
									height: 140rpx;
									// background: #E4F1FF;
									background: #EBF3FF;
									border-radius: 12rpx;
									// border: 2rpx solid #FFFFFF;
									// color: #1677FF;
									color: #000;
									border: 2rpx solid #2456FF;
								}
							}
						}
						.date-list-icon {
							display: flex;
							// justify-content: ;
							flex-direction: column;
							align-items: center;
							.txt{
								color: #2456FF;
								font-size: 22rpx;
								margin-bottom: 6rpx;
							}
							image {
								flex: 0 0 13rpx;
								width: 13rpx;
								height: 14rpx;
							}
							
						}
					}
					.date-period {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						overflow: auto;
						margin-top: 33rpx;
						.li {
							width: 202rpx;
							height: 69rpx;
							background: #F9FBFC;
							// border-radius: 5rpx 5rpx 5rpx 5rpx;
							border-radius: 12rpx;
							overflow: hidden;
							border: 1rpx solid #F9FBFC;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
							&:nth-child(3n+3) {
								margin-right: 0;
							}
							&.on {
								background: #E4F1FF;
								border: 2rpx solid #2456FF;
								// .lr {
								// 	background: #78E383;
								// }
								// .man {
								// 	background: #E4F1FF;
								// }
							}
							.lr {
								flex: 0 0 55rpx;
								width: 55rpx;
								height: 69rpx;
								background: #E6E6E6;
								font-size: 20rpx;
								color: #F9FBFC;
								text-align: center;
								line-height: 69rpx;
								&.lan {
									background: #78E383;
								}
								&.hot{
									background-color: rgba(254, 89, 1, 1);
								}
							}
							.man {
								width: 100%;
								font-size: 20rpx;
								color: #3D3D3D;
								text-align: center;
								line-height: 69rpx;
							}
						}
					}
				}
				// border-radius: 20rpx 20rpx 20rpx 20rpx;
				
			}
		}
	}
	
	
	.require-prop::before{
		content: '*';
		font-size: 28rpx;
		color: red;
		margin-right: 10rpx;
	}
	
	.form {
		width: 706rpx;
		// height: 303rpx;
		background: #FFFFFF;
		padding: 25rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin: 20rpx auto;
		.title {
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D;
			margin-bottom:40rpx;
		}
		.tips {
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D;
			text{
				&:nth-child(1) {
					margin-right: 36rpx;
				}
			}
		}
		.list {
			.li {
				padding: 25rpx 0;
				border-top: 2rpx solid #F3F6F8;
				font-size: 28rpx;
				color: #171819;
				line-height: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:nth-child(1) {
					border-top:0;
				}
				input {
					margin-left: 10rpx;
					font-size: 28rpx;
					text-align: right;
					// color: #C3CBCF;
				}
			}
		}
	}
	
	.btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		height: 111rpx;
		background: #FFFFFF;
		// padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price {
			padding:0 40rpx;
			display: flex;
			align-items: center;
			text {
				font-size: 25rpx;
				color: #666666;
				&:nth-child(2) {
					font-size: 35rpx;
					color: #E93B3D;
				}
			}
			
			
		}
		.yh {
			font-size: 20rpx;
			color: #666;
		}
		button {
			width: 376rpx;
			height: 100%;
			// background: #003153;
			background: #2456FF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-weight: 400;
			font-size: 35rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 0;
		}
	}
	
	
	
	
	.pay-pop-warp{
		width: 750rpx;
		height: 710rpx;
		background: #FFFFFF;
		padding: 22rpx;
		box-sizing: border-box;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		.success-icon{
			width: 152rpx;
			height: 152rpx;
			margin: 50rpx auto;
		}
		.success-txt{
			width: 100%;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			margin: 50rpx auto;
		}
		.jifen-box{
			width: 100%;
			height: 120rpx;
			background: #F3F5F8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			.left{
				display: flex;
				align-items: center;
				.star-icon{
					width: 60rpx;
					height: 62rpx;
				}
				.star-txt{
					margin-left: 36rpx;
					font-size: 26rpx;
					color: #000000;
				}
			}
			.right{
				font-size: 26rpx;
				color: #979797;
			}
		}
		.confirm-btn{
			margin-top: 70rpx;
			button {
				width: 707rpx;
				height: 88rpx;
				background: #2456FF;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin: 0 auto;
			}
		}
	}
	
	
	.popup {
		border-radius: 10rpx 10rpx 0 0;
		// background-color: #fff;
		background: #F0F1F4;
		padding: 22rpx;
		.title {
			position: relative;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid #D8D8D8;
			padding: 30rpx 0;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 30rpx;
			color: #3D3D3D;
			.gb {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.wallet {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.price {
				font-weight: 500;
				font-size: 60rpx;
				color: #000000;
				padding: 0 0 30rpx 0;
				text{
					&:nth-child(1) {
						font-size: 45rpx;
						margin-right: 10rpx;
					}
				}
			}
			.djs {
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
				padding-bottom: 45rpx;
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				.djs-rest-time{
					// color: #F0F1F4;
				}
				.djs-con{
					color: rgba(36, 86, 255, 1);
				}
			}
			.jifen{
				width: 100%;
				margin-bottom: 90rpx;
				text-align: center;
				font-weight: 300;
				font-size: 24rpx;
				color: #9B9C9B;
			}
		}
		.payment {
			padding: 22rpx 20rpx;
			width: 706rpx;
			// height: 304rpx;
			background: #F7F8FA;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			.pay-mode{
				font-weight: 400;
				font-size: 24rpx;
				color: #636363;
			}
			.li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 22rpx 0;
				.left {
					display: flex;
					align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
				}
				.icon {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					overflow:hidden;
					border: 1rpx solid #d2d2d2;
					image {
						width: 100%;
						height: 100%;
						transform-origin: center;
						transform: scale(.6);
						// width: 28rpx;
						// height: 28rpx;
					}
				}
			}
		}
		.pay-btn {
			margin-top: 250rpx;
			button {
				width: 707rpx;
				height: 88rpx;
				// background: #003153;
				// border-radius: 10rpx 10rpx 10rpx 10rpx;
				background: #2456FF;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin: 0 auto;
			}
			
		}
	}
</style>